<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <!-- 查询区域 -->
    <div class="table-page-search-wrappe">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="团队名称">
              <select-team-input
                :multi="true"
                placeholder="请选择团队"
                v-model="queryParam.teamIdList"
                :teamType="0"
                :tdlx="3"/>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="参保单位">
              <select-company-input placeholder="请选择参保单位" :multi="true" v-model="queryParam.companyIdList"/>
            </a-form-item>
          </a-col>
          <a-col :xl="10" :lg="11" :md="12" :sm="24">
              <a-form-item label="入职时间">
                <j-date placeholder="请选择开始日期" class="query-group-cust" v-model="queryParam.queryJoinDateStart"></j-date>
                <span class="query-group-split-cust"></span>
                <j-date placeholder="请选择结束日期" class="query-group-cust" v-model="queryParam.queryJoinDateEnd"></j-date>
              </a-form-item>
            </a-col>
          <!-- <template v-if="toggleSearchStatus"></template> -->
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a> -->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-row :gutter="24">
        <a-col :xl="6" :lg="7" :md="8" :sm="24">
          <a-spin :spinning="loadings.sexLoading">
            <a-card hoverable :bodyStyle="{padding: '24px 0',minHeight: '300px'}" :style="'width:' + offsetWidth + 'px'" ref="chartCard">
              <my-Chart :option="optionDataSex" @click="onSex" style="width: 100%; min-height: 300px"></my-Chart>
            </a-card>
          </a-spin>
        </a-col>
        <a-col :xl="6" :lg="7" :md="8" :sm="24">
          <a-spin :spinning="loadings.ageLoading">
            <a-card hoverable :bodyStyle="{padding: '24px 0',minHeight: '300px'}" :style="'width:' + offsetWidth + 'px'" ref="chartCard">
              <my-Chart :option="optionDataAge" @click="onAge" style="width: 100%; min-height: 300px"></my-Chart>
            </a-card>
          </a-spin>
        </a-col>
        <a-col :xl="6" :lg="7" :md="8" :sm="24">
          <a-spin :spinning="loadings.educationLoading">
            <a-card hoverable :bodyStyle="{padding: '24px 0',minHeight: '300px'}" :style="'width:' + offsetWidth + 'px'" ref="chartCard">
              <my-Chart :option="optionDataEducation" @click="onEducation" style="width: 100%; min-height: 300px"></my-Chart>
            </a-card>
          </a-spin>
        </a-col>
        <a-col :xl="6" :lg="7" :md="8" :sm="24">
          <a-spin :spinning="loadings.comAgeLoading">
            <a-card hoverable :bodyStyle="{padding: '24px 0',minHeight: '300px'}" :style="'width:' + offsetWidth + 'px'" ref="chartCard">
              <my-Chart :option="optionDataComAge" @click="onComAge" style="width: 100%; min-height: 300px"></my-Chart>
            </a-card>
          </a-spin>
        </a-col>
      </a-row>
    </div>
    <!-- TODO 花名册弹窗 -->
    <ErpHrReportEmployeeListPenetrate ref="penetrate"></ErpHrReportEmployeeListPenetrate>
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'
import SelectCompanyInput from '@/views/scy/components/SelectCompanyInput'
import SelectTeamInput from '@/views/scy/components/SelectTeamInput'
import { getAction } from '@/api/manage'
import MyChart from '@/components/gis/echart/index'
import ErpHrReportEmployeeListPenetrate from '@/views/scy/penetrate/ErpHrReportEmployeeListPenetrate'

export default {
  name: 'ErpReportHrEmployeeList',
  mixins: [JeecgListMixin, mixinDevice, DisabledAuthFilterMixin],
  components: {
    SelectCompanyInput,
    SelectTeamInput,
    MyChart,
    ErpHrReportEmployeeListPenetrate
  },
  data() {
    return {
      offsetWidth: 390,
      description: '在职人员分析管理页面',
      // 表头
      columns: [],
      // 列设置
      settingColumns: [],
      // 列定义
      defColumns: [],
      url: {
        list: '/api/erp/hr/report/employeeanalysis/erpReportHrEmployeeAnalysis/queryProportionByAnalysisType' // {...,code:'1'} 1:性别占比 2:年龄占比 3:学历占比 4司龄(在职时间)
      },
      dictOptions: {},
      superFieldList: [],
      queryParam: {},
      loadings: {
        sexLoading: false,
        ageLoading: false,
        educationLoading: false,
        comAgeLoading: false
      },
      optionDataSex: {
        title: {
          text: '性别占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 0,
          left: 'center'
        },
        series: [
          {
            name: '性别占比',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [],
            label: {
              formatter: '{d}%'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },

      optionDataAge: {
        title: {
          text: '年龄占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 0,
          left: 'center'
        },
        series: [
          {
            name: '年龄占比',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [],
            label: {
              formatter: '{d}%'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },

      optionDataEducation: {
        title: {
          text: '学历占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 0,
          left: 'center'
        },
        series: [
          {
            name: '学历占比',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [],
            label: {
              formatter: '{d}%'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      optionDataComAge: {
        title: {
          text: '司龄（在职时间）',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 0,
          left: 'center'
        },
        series: [
          {
            name: '司龄（在职时间）',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [],
            label: {
              formatter: '{d}%'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  created() {
    this.getSuperFieldList();
  },
  mounted () {
    // 获取宽高
    console.log('---------', this.$refs.chartCard, this.$refs.chartCard.$el.offsetHeight)
    this.offsetWidth = this.$refs.chartCard.$el.offsetWidth
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
  },
  methods: {
    loadData(arg) {
      return false
    },
    // 查询
    searchQuery() {
      console.log('1313123')
      this.sexEChart() // 性别接口
      this.ageEChart() // 年龄接口
      this.educationEChart() // 学历接口
      this.comAgeEChart() // 司龄接口
    },
    // 重置
    searchReset() {
      this.queryParam = {}
      this.sexEChart() // 性别接口
      this.ageEChart() // 年龄接口
      this.educationEChart() // 学历接口
      this.comAgeEChart() // 司龄接口
    },
    getSuperFieldList() {
      let fieldList = [];
      this.superFieldList = fieldList
      this.sexEChart() // 性别接口
      this.ageEChart() // 年龄接口
      this.educationEChart() // 学历接口
      this.comAgeEChart() // 司龄接口
    },
    // 性别接口
    sexEChart() {
      this.loadings.sexLoading = true;
      var params1 = { ...this.queryParam, code: '1' }
      // params1.code = '1';
      console.log('this.queryParam', this.queryParam, params1, '----------')
      getAction(this.url.list, params1).then(res => {
        console.log('res-----', res, this.optionDataSex.series[0], params1)
        this.optionDataSex.series[0].data = []
        if (res.result && res.result.length) {
          res.result.map(value => {
            this.optionDataSex.series[0].data.push({
              value: value.value,
              name: value.desc,
              query: value.name
            })
          })
        }
        console.log('---------', this.$refs.chartCard, this.$refs.chartCard.$el.offsetHeight)
        console.log(' this.optionDataSex', this.optionDataSex)
      }).catch(e => {
        console.log(e)
      }).finally(() => {
        this.loadings.sexLoading = false
      })
    },
    // 年龄接口
    ageEChart() {
      this.loadings.ageLoading = true
      var params2 = { ...this.queryParam, code: '2' }
      // params2.code = '2';
      getAction(this.url.list, params2).then(res => {
        console.log('res-----', res, this.optionDataAge.series[0], params2)
        // this.optionDataAge.series[0].data = res.result
        this.optionDataAge.series[0].data = []
        if (res.result && res.result.length) {
          res.result.map(value => {
            this.optionDataAge.series[0].data.push({
              value: value.value,
              name: value.desc,
              query: value.name
            })
          })
        }
        console.log(' this.optionDataAge', this.optionDataAge)
      }).catch(e => {
        console.log(e)
      }).finally(() => {
        this.loadings.ageLoading = false
      })
    },
    // 学历接口
    educationEChart() {
      this.loadings.educationLoading = true
      var params3 = { ...this.queryParam, code: '3' }
      // params3.code = '3';
      getAction(this.url.list, params3).then(res => {
        console.log('res-----', res, this.optionDataEducation.series[0], params3)
        // this.optionDataEducation.series[0].data = res.result
        this.optionDataEducation.series[0].data = []
        if (res.result && res.result.length) {
          res.result.map(value => {
            this.optionDataEducation.series[0].data.push({
              value: value.value,
              name: value.desc,
              query: value.name
            })
          })
        }
        console.log(' this.optionDataEducation', this.optionDataEducation)
      }).catch(e => {
        console.log(e)
      }).finally(() => {
        this.loadings.educationLoading = false
      })
    },
    // 司龄接口
    comAgeEChart() {
      this.loadings.comAgeLoading = true
      var params4 = { ...this.queryParam, code: '4' }
      // params4.code = '4';
      getAction(this.url.list, params4).then(res => {
        console.log('res-----', res, this.optionDataComAge.series[0], params4)
        // this.optionDataComAge.series[0].data = res.result
        this.optionDataComAge.series[0].data = []
        if (res.result && res.result.length) {
          res.result.map(value => {
            this.optionDataComAge.series[0].data.push({
              value: value.value,
              name: value.desc,
              query: value.name
            })
          })
        }
        console.log(' this.optionDataComAge', this.optionDataComAge)
      }).catch(e => {
        console.log(e)
      }).finally(() => {
        this.loadings.comAgeLoading = false
      })
    },

    onSex(event) {
      console.log('-------点击性别图表', event)
      // 查询条件
      const params = Object.assign(this.queryParam)
      let queryParams = { params }
      // 性别
      if (!!event.data && !!event.data.query) {
        queryParams.gender = event.data.query
      }
      // 打开弹窗 并且把查询条件传进去
      this.$refs.penetrate.onOpen(queryParams);
    },
    onAge(event) {
      console.log('-------点击年龄图表', event)
      // 查询条件
      const params = Object.assign(this.queryParam)
      let queryParams = { params }
      // 年龄
      if (!!event.data && !!event.data.query) {
        let ageLevel = event.data.query
        // 处理年龄段参数
        switch (ageLevel) {
          // 大于等于20小于等于30
          case 'l23' : {
            this.$set(queryParams, 'ageStart', '19')
            this.$set(queryParams, 'ageEnd', '31')
            this.$set(queryParams, 'label', '20-30岁')
          }
            break;
          // 大于30小于等于40
          case 'l34': {
            this.$set(queryParams, 'ageStart', '30')
            this.$set(queryParams, 'ageEnd', '41')
            this.$set(queryParams, 'label', '31-40岁')
          }
            break;
          // 大于40小于等于50
          case 'l45': {
            this.$set(queryParams, 'ageStart', '40')
            this.$set(queryParams, 'ageEnd', '51')
            this.$set(queryParams, 'label', '41-50岁')
          }
            break;
          // 大于50小于等于60
          case 'l56': {
            this.$set(queryParams, 'ageStart', '50')
            this.$set(queryParams, 'ageEnd', '61')
            this.$set(queryParams, 'label', '51-60岁')
          }
            break;
        }
      }
      this.$refs.penetrate.onOpen(queryParams);
    },
    onEducation(event) {
      console.log('-------点击学历图表', event)
      // 查询条件
      const params = Object.assign(this.queryParam)
      let queryParams = { params }
      // 学历
      if (!!event.data && !!event.data.query) {
        let ageLevel = event.data.query
        // 处理年龄段参数
        switch (ageLevel) {
          // 博士
          case 'doctor' : {
            this.$set(queryParams, 'highestDegree', '5')
          }
            break;
          // 研究生
          case 'postgraduate': {
            this.$set(queryParams, 'highestDegree', '4')
          }
            break;
          // 本科
          case 'undergraduate': {
            this.$set(queryParams, 'highestDegree', '3')
          }
            break;
          // 专科
          case 'technology': {
            this.$set(queryParams, 'highestDegree', '2')
          }
            break;
          // 高中及以下
          case 'underhigh': {
            this.$set(queryParams, 'highestDegree', '1')
          }
            break;
        }
      }
      this.$refs.penetrate.onOpen(queryParams);
    },
    onComAge(event) {
      console.log('-------点击司龄图表', event)
      // 查询条件
      const params = Object.assign(this.queryParam)
      let queryParams = { params }
      // 司龄
      if (!!event.data && !!event.data.query) {
        let ageLevel = event.data.query
        // 处理年龄段参数
        switch (ageLevel) {
          // 小于1年
          case 'l1' : {
            this.$set(queryParams, 'companyAgeEnd', '1')
            this.$set(queryParams, 'label', '小于1年')
          }
            break;
          // 大于等于1年小于等于3年
          case 'l13': {
            this.$set(queryParams, 'companyAgeStart', '0.9')
            this.$set(queryParams, 'companyAgeEnd', '3.1')
            this.$set(queryParams, 'label', '1-3年')
          }
            break;
          // 大于3年小于等于5年
          case 'l35': {
            this.$set(queryParams, 'companyAgeStart', '3')
            this.$set(queryParams, 'companyAgeEnd', '5.1')
            this.$set(queryParams, 'label', '3-5年')
          }
            break;
          // 大于5年小于等于10年
          case 'l510': {
            this.$set(queryParams, 'companyAgeStart', '5')
            this.$set(queryParams, 'companyAgeEnd', '10.1')
            this.$set(queryParams, 'label', '5-10年')
          }
            break;
          // 大于10年
          case 'l10': {
            this.$set(queryParams, 'companyAgeStart', '10')
            this.$set(queryParams, 'label', '大于10年')
          }
            break;
        }
      }
      this.$refs.penetrate.onOpen(queryParams);
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
.ant-card-body {
    padding: 24px 0 !important;
    zoom: 1;
}
</style>
